<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Liunx 设备检测系统</title>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"/>
    <!-- Import Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="//unpkg.com/element-plus"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }



    </style>
</head>
<body style="display: flex;justify-content: center;align-items: center;height: 100vh">

<div style="width: 1080px;min-height: 600px" id="app">
    <!-- 链接-->
    <div style="display: flex;align-items: center;align-content: center">
        <span></span>
        <div>
            <el-input v-model="serverUrl" style="width: 160px" placeholder=""/>
        </div>
        <div style="display: flex;align-items: center">
            <el-button type="success" @click="handlerLink">链接</el-button>
            <el-button type="warning" @click="handlerClose">断开</el-button>
            <el-button type="warning" @click="handlerWatchSys">监听系统状态</el-button>
            <el-button type="warning" @click="handlerCloseWatchSys">关闭系统状态监听</el-button>
            <el-button type="warning" @click="handlerWatchUsb">监听usb插拔</el-button>
            <el-button type="warning" @click="handlerCloseWatchSyUsb">关闭监听usb插拔</el-button>
        </div>
    </div>
    <!-- 文件内容搜索-->
    <div style="display: flex;align-items: center;margin-top: 10px">
        <div>
            <span>搜索开始路径:</span>
            <el-input v-model="searchPath" style="width: 200px" placeholder=""/>

        </div>
        <div>
            <span>内容:</span>
            <el-input v-model="searchContent" style="width: 200px" placeholder=""/>

        </div>
        <div style="display: flex;align-items: center">
            <el-button type="warning" @click="handlerSearch">搜索</el-button>
        </div>
    </div>


    <!-- usb检测-->
    <div style="height:300px;border: 1px  solid  #858282;display: flex;margin-top: 10px">
        <div style="width: 50%;height: 300px;background: black;color: white">
            <div>系统信息</div>
            <div>CPU：{{systemInfo.cpu||"--"}}</div>
            <div>内存:{{systemInfo.memery||"--"}}</div>
        </div>
        <div style="width: 50%;height: 300px;background: black;color: white">
            <div>文件搜索结果:</div>
            <div style="height: 300px;overflow-y: auto">
                <div v-for="(item,index) in searchFileResult" :key="index">{{item}}</div>
            </div>
        </div>
    </div>
    <!--文件查找-->
    <div style="background: black;color: white">
        <div>usb:</div>
        <div style="height: 300px;overflow-y: auto">
            <div v-for="(item,index) in usbResult" :key="index">{{item}}</div>
        </div>
    </div>
    <!--服务器消息-->
    <div style="background: black;padding: 10px 20px;color: white">来自服务器的消息:{{serverMessage}}</div>
</div>


</body>

</html>

<script>
    const {createApp} = Vue
    const app = createApp({
        data() {
            return {

                conn: null,
                serverUrl: "ws://127.0.0.1:12580",
                message: 'Hello Vue!',
                serverMessage: "",
                systemInfo: {},
                searchPath: "F:\\zikao_java\\swing",
                searchContent: "main",
                searchFileResult: [],
                usbResult:[]
            }
        },
        mount() {
        },
        methods: {
            handlerLink() {
                this.conn = new WebSocket(this.serverUrl)
                this.conn.onopen = (ws, e) => {
                    console.log('>>>>>>>>>>>服务器已经链接')
                }
                this.conn.onmessage = (ws) => {
                    console.log('>>>>>>>>message', ws.data)
                    let data = JSON.parse(ws.data)
                    console.log('>>>>>>>转换之后数据', data)
                    if (data.code) {
                        this.serverMessage = data.message
                    }
                    if (data.type && data.type == 'system-info') {
                        this.systemInfo = {...data}
                    }
                    if (data.type && data.type == 'search-file-result') {
                        this.searchFileResult = data.path
                    }
                    if (data.type && data.type == 'usb-info') {
                        this.usbResult.push(data.info)
                    }
                }
                this.conn.onclose = (ws) => {
                    console.log(ws.data)
                }
            },
            handlerClose() {
                this.conn && this.conn.close()
                this.serverMessage = "暂无"
            },
            handlerWatchSys() {
                let obj = {
                    type: "显示系统信息"
                }
                this.conn && this.conn.send(JSON.stringify(obj))
            },
            handlerCloseWatchSys() {
                let obj = {
                    type: "关闭系统信息"
                }
                this.conn && this.conn.send(JSON.stringify(obj))
            },
            handlerSearch() {
                this.searchFileResult = []
                let obj = {
                    type: "查找文件",
                    path: this.searchPath,
                    content: this.searchContent
                }
                this.conn && this.conn.send(JSON.stringify(obj))
            },
            handlerWatchUsb() {
                let obj = {
                    type: "显示USB"
                }
                this.conn && this.conn.send(JSON.stringify(obj))
            },
            handlerCloseWatchSyUsb() {
                 this.usbResult=[]
                let obj = {
                    type: "关闭USB"
                }
                this.conn && this.conn.send(JSON.stringify(obj))
            }
        }
    })
    app.use(ElementPlus);
    app.mount('#app')



</script>
